<!-- App.vue -->
<template>
  <div class="min-h-screen flex flex-col">
    <!-- 全局导航 -->
    <NavBar />
    
    <!-- 动态路由内容 -->
    <main class="flex-grow">
      <router-view v-slot="{ Component }">
        <transition name="fade" mode="out-in">
          <component :is="Component" />
        </transition>
      </router-view>
    </main>

    <!-- 全局页脚 -->
    <!-- <Footer /> -->

    <!-- 全局模态框 -->
    <teleport to="body">
      <AttractionCard />
    </teleport>
  </div>
</template>

<script setup lang="ts">
// 基础布局组件
import NavBar from './components/layout/NavBar.vue'
import Footer from './components/layout/Footer.vue'
// 全局通用组件
import AttractionCard from './components/ui/AttractionCard.vue'
</script>

<style>
/* 全局过渡动画 */
.fade-enter-active,
.fade-leave-active {
  transition: all 0.2s ease;
  will-change: transform, opacity;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
  transform: translateY(10px);
}
</style>